<script setup lang="ts">
import { reactive, ref } from "vue";
import { apiEdit, apiGetUserInfo } from "@/apis/user";
import userService from "@/services/userService";
import { onLoad, onShow } from "@dcloudio/uni-app";
import cache from "@/utils/cache";
const chooseLocation = requirePlugin("chooseLocation");
//const key = ref("XMGBZ-I25WB-INDUT-JPNBT-ATY6S-YRBTJ");
const key = ref("QWQBZ-XIXCZ-6W2XR-7ISUU-QQX6E-GMBEF");
const referer = ref("乐石");
const category = ref("全部,地名地址,小区,酒店宾馆");
const latitude: any = ref(null);
const longitude: any = ref(null);
const fbAddress: any = ref("");
const userInfo = reactive({
  address: "", //用户地址
});
const address = ref()
onLoad((options: any) => {
  userInfo.userName = options.nickName
});
onShow(() => {
  fetchData();
});
// 地图选点
const choosePosition = async () => {
  const location = JSON.stringify({
    latitude: latitude.value,
    longitude: longitude.value,
  });
  uni.navigateTo({
    url: `plugin://chooseLocation/index?key=${key.value}&referer=${referer.value}&location=${location}&category=${category.value}`,
  });
};
const getChooseLocation = async () => {
  await choosePosition();
};
const fetchData = async () => {
  chooseLocationFn();
  const res = await chooseLocation.getLocation();
  if (res) {
    fbAddress.value = res.address;
    address.value = res.address;
    longitude.value = res.longitude;
    latitude.value = res.latitude;
    userInfo.address = res.address
    // cache.set("address", res.address);
  }
};
const chooseLocationFn = async () => {
  uni.getLocation({
    type: "wgs84",
    success: (res) => {
      // userInfo.address = res.address;
      latitude.value = res.latitude;
      longitude.value = res.longitude;
    },
  });
};
const cancel = () => {
  uni.navigateBack({ delta: 1 });
};
const submit = async () => {
  // uni.navigateBack({ delta: 1 })
  // uni.navigateBack({ delta: 1 })
  // let res = await apiEdit(userInfo);
  userService.edit(userInfo);
  setTimeout(function () {
    uni.navigateBack({ delta: 1 });
  }, 500);
};
</script>
<template>
  <view>
    <!-- <view>
      <uv-input
        :focus="true"
        :maxlength="5"
        cursor="1"
        border="none"
        placeholder=""
        v-model="userInfo.userName"
        @change="change"
      ></uv-input>
    </view> -->
    <view class="form-card form-item">
      <view class="form-item-label">
        <image src="@/static/images/orientation.png" mode="scaleToFill" class="form-item-icon" />
        <text>现住址：</text>
      </view>
      <view class="form-input" @click="getChooseLocation">
        <input placeholder="请选择" disabled v-model="address" />
        <view class="form-input-suff">
          <image src="@/static/images/arrow.png" />
        </view>
      </view>
    </view>
    <view class="btn-group flex-around">
      <button class="btn-cancel" @click="cancel">取消</button>
      <button class="btn-save" @click="submit">保存</button>
    </view>
  </view>
</template>

<style lang="scss">
::v-deep .uv-input {
  background-color: #ffffff;
  height: 80rpx;
}

.btn-group {
  display: flex;
  padding-bottom: 60rpx;
  margin-top: 50rpx;
  font-size: 28rpx;

  .btn-cancel {
    background-color: transparent;
    border: 1px solid #999999;
    box-shadow: none;
    border-radius: 24rpx;
    width: 220rpx;
    height: 80rpx;
  }

  .btn-save {
    background: linear-gradient(0deg,
        rgba(191, 1, 3, 1) 0%,
        rgba(255, 84, 2, 1) 99.2%);
    box-shadow: none;
    border: 1px solid #999999;
    border-radius: 24rpx;
    border: none;
    width: 220rpx;
    color: #ffffff;
    height: 80rpx;
  }
}

.form-card {
  width: 100%;
  background-color: #ffffff;
  border-radius: 24rpx;
  margin-bottom: 20rpx;

  .form-card-title {
    color: #333333;
    padding: 20rpx;
  }

  .form-card-radio {
    display: flex;
  }
}

.form-item {
  display: flex;
  height: 100rpx;
  // justify-content: center;
  align-items: center;
}

.form-item-label {
  display: flex;
  flex-direction: row;
  // width: 300rpx;
  justify-content: flex-start; // 靠左对齐
  flex-wrap: nowrap;
  // flex: 1;

  text {
    font-size: 28rpx;
  }
}

.form-item-icon {
  margin-top: 7rpx;
  width: 32rpx;
  height: 32rpx;
  margin: 0 20rpx;
}

.form-input {
  border: none;
  font-size: 26rpx;
  position: relative;
  width: 100%;
  flex: 1;

  .form-input-suff {
    position: absolute;
    right: 0;
    transform: translate(-50%, -50%);
    top: 50%;

    text {
      font-size: 24rpx;
      color: #bebebe;
    }

    image {
      width: 28rpx;
      height: 28rpx;
    }
  }
}
</style>
